<template>
  <span
    :class="[
      'relative z-0 inline-flex shadow-sm',
      size != 'sm' ? 'rounded-md' : 'rounded',
    ]"
  >
    <IButton
      :variant="variant"
      :size="size"
      :type="type"
      :icon="icon"
      :icon-class="iconClass"
      :to="to"
      :rounded="false"
      :disabled="disabled"
      :loading="loading"
      :class="[
        'focus:z-10',
        size != 'sm' ? 'rounded-l-md' : 'rounded-l',
        { '-mr-px': !disabled },
      ]"
      @click="$emit('click', $event)"
    >
      <slot name="button-content">
        {{ text }}
      </slot>
    </IButton>

    <IDropdown :placement="placement">
      <template #toggle="{ toggle }">
        <IButton
          :variant="variant"
          :disabled="disabled"
          :size="size"
          :rounded="false"
          :class="['focus:z-10', size != 'sm' ? 'rounded-r-md' : 'rounded-r']"
          @click="toggle"
        >
          <slot name="dropdown-toggle-content">
            <Icon
              icon="ChevronDown"
              :class="size === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
            />
          </slot>
        </IButton>
      </template>

      <slot></slot>
    </IDropdown>
  </span>
</template>

<script setup>
defineProps({
  text: String,
  to: [Object, String],
  placement: { type: String, default: 'bottom-end' },
  size: { type: String, default: 'md' },
  disabled: Boolean,
  loading: Boolean,
  variant: { type: String, default: 'primary' },
  icon: { type: String },
  type: { type: String, default: 'button' },
  iconClass: [String, Array, Object],
})

defineEmits(['click'])
</script>
